import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    View,
} from 'react-native';

export default class Row extends Component {

    constructor(props, context) {
        super(props, context);
    }

    render() {
        const {
            size,
            direction,
            styleName,
            ...props
        } = this.props;
        let distance;
        if(size == 'none'){
            distance = 0;
        }else if(size == 'XS') {
            distance = 5;
        }else if(size == 'S') {
            distance = 10;
        }else if(size == 'M') {
            distance = 15;
        }else if(size == 'L'){
            distance = 20;
        }else if(size == 'XL'){
            distance = 30;
        }else if(size == 'XXL'){
            distance = 40;
        }


        let childStyle = direction === 'horizontal'?
            {marginRight: distance} : {marginBottom: distance};

        let _this = this;

        let renderChildren = React.Children.map(this.props.children, (child,index) => {
            if (child === null) {
                return;
            }
            const newProps = {
                ref: child.ref,
                key: child.key,
            }
            let childCount = React.Children.count(_this.props.children);

            if(childCount === 1 || (childCount!== 1 && index !== childCount-1)){
                newProps[styleName] = [child.props[styleName],childStyle]
                return React.cloneElement(child, newProps)
            }else {
                return React.cloneElement(child, newProps)
            }
        })
        return (
            <View {...props}>
                {renderChildren}
            </View>
        );
    }
}

Row.propTypes = {
    direction: PropTypes.oneOf(['horizontal','vertical']),
    size: PropTypes.oneOf(['none','XS','S','M','L','XL','XXL']),
    styleName: PropTypes.string
};

Row.defaultProps = {
    direction: 'vertical',
    size: 'none',
    styleName: 'style'
}